<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { ArrowDownBold, QuestionFilled, View as IconView } from '@element-plus/icons-vue'
import { getMiaoClientPage, MiaoClient, SearchDevice } from '../../../api/device'
import ClientDetails from './details.vue'
import dayjs from 'dayjs'

const searchForm = reactive<SearchDevice>({
  ip: '',
  hostname: '',
  page: 1,
  pageSize: 10
})
const dataList = ref<MiaoClient[]>([])
const total = ref(0)

const onSearch = () => {
  getMiaoClientPage(searchForm).then((res) => {
    dataList.value = res.list
    total.value = res.total
  })
}
onMounted(() => {
  onSearch()
})
const formatter = (row: MiaoClient, column: TableColumnCtx<MiaoClient>) => {
  return dayjs(row.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss')
}
const refDetails = ref()
const handleDetails = (row: MiaoClient) => {
  console.log(row)
  refDetails.value.showDialog(row)
}

const sonRef = ref<null | any>(null)
const clickMoreMenu = (command: any) => {
  console.log(command)
  switch (command.command) {
    case 'a':
      break
  }
}
// 对el-dropdown 的command 事件进行包装
const beforeHandleCommand = (index: any, row: any, command: any) => {
  return {
    index,
    row,
    command
  }
}

</script>
<template>
  <ClientDetails ref="refDetails"></ClientDetails>
  <el-card>
    <el-card class="search-card">
      <el-input v-model="searchForm.ip" placeholder="按IP查询"/>
      <el-input v-model="searchForm.hostname" placeholder="按机器名查询"/>
      <el-button type="primary" @click="onSearch">查询</el-button>
    </el-card>
    <el-card class="body-card">
      <el-table :data="dataList" style="width: 100%">
        <el-table-column label="IP地址" prop="IP"/>
        <el-table-column label="主机名称" prop="hostname"/>
        <el-table-column
            label="主板序列号"
            prop="mainBoardSerial"
        ></el-table-column>
        <el-table-column prop="hardDiskSerial">
          <template #header>
            固定硬盘序列号
            <el-tooltip
                class="box-item"
                content="MediaType字段包含 'Fixed' +2分；InterfaceType字段为 'USB' -1分，最终得分最高的一块硬盘"
                effect="dark"
                placement="top-start"
            >
              <el-icon>
                <QuestionFilled/>
              </el-icon>
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="设备ID" prop="deviceID"/>
        <el-table-column
            :formatter="formatter"
            label="接入时间"
            prop="createdAt"
            width="180"
        />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-link
                :icon="IconView"
                :underline="false"
                type="primary"
                @click="handleDetails(scope.row)"
            >详情
            </el-link
            >
            &emsp;
            <el-link
                :icon="ArrowDownBold"
                :underline="false"
                type="primary"
                @click="handleUpdate(scope.row)"
            >
              <el-dropdown @command="clickMoreMenu">
                <span class="bt-more"> 更多 </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="beforeHandleCommand(scope.$index,scope.row,'a')">标记为应用服务器
                    </el-dropdown-item>
                    <el-dropdown-item command="b">刷新全量数据</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :total="total"
          background
          layout="total,prev, pager, next"
      />
    </el-card>
  </el-card>
  <HostDialog ref="sonRef"></HostDialog>
</template>
<style lang="scss" scoped>
.search-card {
  .el-card__body {
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }

  margin-bottom: 10px;
}

.bt-more {
  color: #409eff;
}
</style>
`
